<template>
  <div>
    <div class="control">
      <Button type="primary" @click="add">添加</Button>
    </div>
    <Table row-key="id" :columns="tableColumns" :data="tableData" border>
      <template slot="icon" slot-scope="{ row, index }">
        <Icon :type="row.icon"/>
      </template>
      <template slot="is_show" slot-scope="{ row, index }">
        <i-switch v-model="row.is_show" :true-value="1" :false-value="0" @on-change="isShowChange(row)"></i-switch>
      </template>
      <template slot="action" slot-scope="{ row, index }">
        <Button type="primary" @click="edit(row)">编辑</Button>
        <Button type="warning" @click="action(row)">行为</Button>
        <Button type="error" @click="del(row)">删除</Button>
      </template>
    </Table>

    <Modal v-model="modal"
           title="添加/编辑"
           :draggable="false">
      <div slot="footer">
        <Button @click="modal = false">取消</Button>
        <Button type="primary" @click="handlerSubmit">确定</Button>
      </div>
      <Form ref="editForm" :model="editForm" :rules="formRules" :label-width="80">
        <FormItem label="上级菜单" prop="parent_id">
          <Select v-model="editForm.parent_id">
            <Option v-for="item in parentMenu" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="菜单名称" prop="name">
          <Input v-model="editForm.name"></Input>
        </FormItem>
        <FormItem label="url" prop="url">
          <Input v-model="editForm.url"></Input>
        </FormItem>
        <FormItem label="图标" prop="icon">
          <Input v-model="editForm.icon"></Input>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <Input v-model="editForm.sort"></Input>
        </FormItem>
        <FormItem label="是否显示">
          <i-switch v-model="editForm.is_show" :true-value="1" :false-value="0"></i-switch>
        </FormItem>
      </Form>
    </Modal>

    <Modal v-model="actionModal"
           title="行为列表"
           width="700"
           :draggable="false">
      <div slot="footer">
        <Button @click="actionModal = false">关闭</Button>
      </div>
      <div class="margin-bottom">
        <Button type="primary" @click="addAction">添加行为</Button>
      </div>
      <Table row-key="id" :columns="actionTableColumns" :data="actionTableData" border>
        <template slot="action" slot-scope="{ row, index }">
          <Button type="primary" @click="editAction(row)">编辑</Button>
          <Button type="error" @click="del(row)">删除</Button>
        </template>
      </Table>
    </Modal>

    <Modal v-model="actionEditModal"
           title="添加/编辑行为"
           :draggable="false">
      <div slot="footer">
        <Button @click="actionEditModal = false">取消</Button>
        <Button type="primary" @click="handlerActionSubmit">确定</Button>
      </div>
      <Form ref="actionEditForm" :model="actionEditForm" :rules="formRules" :label-width="80">
        <FormItem label="菜单名称" prop="name">
          <Input v-model="actionEditForm.name"></Input>
        </FormItem>
        <FormItem label="url" prop="url">
          <Input v-model="actionEditForm.url"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "menu",
  layout: 'frame_admin',
  data() {
    return {
      tableColumns: [
        {title: 'ID', key: 'id', maxWidth: 100, tree: true, align: 'center'},
        {title: '图标', key: 'icon', maxWidth: 80, slot: 'icon'},
        {title: '菜单名称', key: 'name'},
        {title: 'url', key: 'url'},
        {title: '排序', key: 'sort'},
        {title: '是否显示', key: 'is_show', slot: 'is_show'},
        {title: '操作', slot: 'action'}
      ],
      tableData: [],
      modal: false,
      editForm: {
        name: '',
        desc: ''
      },
      formRules: {
        name: [
          {required: true, message: '请填写名称', trigger: 'blur'}
        ],
        url: [
          {required: true, message: '请填写url', trigger: 'blur'}
        ],
      },
      parentMenu: [],
      actionModal: false,
      actionTableColumns: [
        {title: 'ID', key: 'id'},
        {title: '行为名称', key: 'name'},
        {title: 'url', key: 'url'},
        {title: '排序', key: 'sort'},
        {title: '操作', slot: 'action',minWidth:80}
      ],
      actionTableData: [],
      actionEditModal: false,
      actionEditForm: {},
      actionParentId: '',
    }
  },
  watch: {
    tableData(val, oldVal) {
      this.parentMenu = val;
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      const that = this;
      this.$axios.get('admin/menu/list').then(res => {
        that.tableData = res.data;
      })
    },
    handlerSubmit() {
      const that = this;
      this.editForm['is_menu'] = 1;
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          that.$Spin.show();
          that.$axios.post('admin/menu/edit', that.editForm).then(res => {
            that.$Spin.hide();
            that.loadData();
          })
          that.modal = false;
        } else {
          console.log(valid)
        }
      })
    },
    add() {
      this.modal = true;
      this.editForm = {};
    },
    edit(row) {
      this.editForm = row;
      this.modal = true;
    },
    del(row) {
      const that = this;
      this.$Modal.confirm({
        title: '确认删除？',
        content: '此操作不可逆，是否确认删除当前这条数据',
        onOk: () => {
          that.$axios.post('admin/menu/del', {id: row.id}).then(res => {
            if (res.code === 0) {
              that.$Message.success('删除成功');
              that.loadData();
            }
          })
        }
      });
    },
    isShowChange(row) {
      this.$axios.post('admin/menu/updateIsShow', {
        id: row.id,
        is_show: row.is_show
      }).then(res => {

      });
    },
    action(row) {
      this.actionModal = true;
      const that = this;
      this.actionParentId = row.id;
      this.$axios.get('admin/menu/list', {params: {menu_id: row.id}}).then(res => {
        that.actionTableData = res.data;
      })
    },
    addAction() {
      this.actionEditForm = {parent_id: this.actionParentId};
      this.actionEditModal = true;
    },
    editAction(row) {
      this.actionEditForm = row;
      this.actionEditModal = true;
    },
    handlerActionSubmit() {
      const that = this;
      this.actionEditForm['is_action'] = 1;
      this.$refs['actionEditForm'].validate((valid) => {
        if (valid) {
          that.$Spin.show();
          that.$axios.post('admin/menu/edit', that.actionEditForm).then(res => {
            that.$Spin.hide();
            that.action({id: that.actionParentId})
          })
          that.actionEditModal = false;
        }
      })
    }
  }
}
</script>

<style scoped>

</style>